import './index.less'
import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import { Collapse } from 'antd';
import OrderLine from './OriginMobx/computed'

const { Panel } = Collapse;

@inject('mbx')
@observer
class Index extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props)
        //使用原生mobx生成的对象
        console.log(new OrderLine(1).total)
    }

    render() {
        return (
            <div>
                <div className="mobx-wrap">
                    <div className="origin">
                        <Collapse>
                            <Panel header="这个是mobx原生插件observable 的使用">
                                
                            </Panel>
                            <Panel header="这个是mobx原生插件observable 的使用">
                                
                            </Panel>
                        </Collapse>
                    </div>
                    <div className="react-wrap">
                        <Collapse>
                            <Panel header="这个是mobx原生插件observable 的使用">
                                <p>测试一手computed</p>
                                <button onClick={()=> {
                                    this.props.mbx.setName('111')
                                    console.log('拿到受影响后的newNmae', this.props.mbx)
                                }} >点击测试computed</button>
                            </Panel>
                        </Collapse>
                    </div>
                </div>
            </div>
        )
    }
}


export default Index;